<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style>
        .head {
            height: 80px;
            width: 100%;
            background-color: #00FFFF;
        }

        .logo {
            height: 100px;
            width: 20%;
        }

        .nav {
            height: 100%;
            width: 80%;
        }

        .nav ul {
            height: 100%;
            width: 100%;
            float: left;
            background-color: white;
        }

        .nav li {
            margin-top: 20px;
            line-height: 20px;
        }

        .nav li a {
            font-size: 17px;
        }

        .nav li :hover {
            background-color: black;
            color: white;
        }

        .logo img {
            width: 100%;
            height: 100%;
        }

        .body {
            height: 600px;
            width: 100%;
        }

        .left {
            height: 600px;

        }

        .left ul {
            width: 95%;
            height: 600px;
            border: 1px solid black;
            color: red;
            background-color: white;
        }

        .left li {
            margin-top: 10px;

        }

        .right {
            height: 600px;
        }

        .center {
            height: 600px;
        }

        .breakfast {
            background-color: #00FF00;
        }

        .lunch {
            background-color: orange;
        }

        .dinner {
            background-color: darkblue;
        }

        iframe {
            height: 100%;
            width: 100%;

        }

        .title {
            margin-bottom: 5px;
            width: 97%;
        }

        .begin-order {
            width: 90%;
            height: 350px;
            border: 1px solid black;
            background-color: white;
        }

        .right-order-top {
            width: 100%;
            height: 34px;
            font-family: Microsoft YaHei;
            font-size: 16px;
            color: #fff;
            line-height: 34px;
            position: relative;
            background-color: #c6000a;
            text-indent: 15px;
        }

        .right-order-main {
            height: 200px;

        }

        .right-order-foot {
            margin-top: 10px;
            text-align: center;
        }

        .right-order-foot button {
            width: 140px;
            background-color: #c6000a;
        }

        .right-order-foot ul {
            margin-top: 20px;
            display: block;
            color: #5c9e9e;
            font-size: 10px;
        }

    </style>
    <script src="layui/layui.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        function a() {
            $.ajax({
                url: "food/getType",//请求食品种类
                type: "GET",
                success: function (e) {
                    //请求成功后刷新页面
                    if(${breakType==null}){
                        location.reload();
                    }
                }
            });

        }
    </script>
</head>

<body onload="a()" id="body">
<div class="layui-main">

    <!--    顶部导航-->
    <div class="head layui-row">
        <!--    图标-->
        <div class="logo layui-col-md2 layui-col-sm2 layui-col-xs2">
            <img src="/img/logo.png">
        </div>
        <!-- 顶部导航栏-->
        <div class="nav layui-col-md10 layui-col-sm10 layui-col-xs10">
            <ul class="layui-nav">
                <li class="layui-nav-item">
                    <a href="" style="color: red">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="" style="color:red ">开始订餐</a>
                </li>
                <li class="layui-nav-item">
                    <a href="" style="color: red">个人中心</a>
                </li>
                <li class="layui-nav-item">
                    <a href="" style="color: red">手机订餐APP</a>
                </li>

                <li class="layui-nav-item">
                    <a href="/order/getUserOrder" style="color: red" target="main">我的订单</a>
                </li>
                <li class="layui-nav-item">
                    <c:if test="${num!=null}">
                        <a href="car.jsp" style="color: red" target="main">购物车<span class="layui-badge" id="carfoodnum">${num}</span></a>
                    </c:if>
                </li>
            </ul>
        </div>
    </div>
    <hr style="background-color: red ;height:4px">
    <!--    主要内容-->
    <div class="body layui-row">
        <!--            侧边导航栏,展示食物分类-->
        <div class="left layui-col-md2 layui-col-sm3 layui-col-xs3" id="left">

            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!--                早餐-->
                <li class="breakfast layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">早餐(05:45-9:14)</a>
                    <dl class="layui-nav-child">
                        <c:forEach items="${breakType}" var="meal">
                            <dd><a href="/food/getByType?tid=${meal.id}" target="main">${meal.typename}</a></dd>
                        </c:forEach>
                    </dl>
                </li>
                <!--                午餐-->
                <li class=" lunch layui-nav-item">
                    <a href="javascript:;">中餐(09:15-15:59)</a>
                    <dl class="layui-nav-child">
                        <c:forEach items="${lunchType}" var="meal">
                            <dd><a href="/food/getByType?tid=${meal.id}" target="main">${meal.typename}</a></dd>
                        </c:forEach>
                    </dl>
                </li>
                <!--                晚餐-->
                <li class=" dinner layui-nav-item">
                    <a href="javascript:;">晚餐(14:00-次日05:45)</a>
                    <dl class="layui-nav-child">
                        <c:forEach items="${dinType}" var="meal">
                            <dd><a href="/food/getByType?tid=${meal.id}" target="main">${meal.typename}</a></dd>
                        </c:forEach>
                    </dl>
                </li>
            </ul>
        </div>
        <!--       中间加载内容 -->
        <div class="center layui-col-md8 layui-col-sm7 layui-col-xs7 ">
            <!--        标题-->
            <div class="title layui-row" style="background-color: gray">
                <span class="layui-icon layui-icon-gift">最新活动:</span>
            </div>

            <iframe name="main" src="main.jsp" frameborder="no">

            </iframe>
        </div>
        <!--        右边装饰菜单-->
        <div class="right layui-col-md2 layui-col-md2 layui-col-sm2 layui-col-xs2">
            <div class="begin-order">
                <div class="right-order-top">
                    开始点餐
                </div>
                <div class="right-order-main" style="float: left">
                    <div class="layui-row" style="background-color: orange;margin-top: 20px;margin-left: 10px">
                        <div class="layui-col-md3" style="background-color: #cacaca;height: 30px;text-align: center;display: flex;align-items: center" >
                            <i class="layui-icon layui-icon-cellphone-fine" style="margin-left: 10px"></i>
                        </div>
                        <div class="layui-col-md9">
                            <input name="food" type="text" style="height: 30px;width: 114px">
                        </div>
                    </div>
                    <div class="layui-row" style="margin-left: 10px;margin-top: 10px">
                        <input type="checkbox"><label style="margin-left: 10px">记住我</label>
                    </div>

                </div>
                <div class="right-order-foot">
                    <button class="layui-btn">下一步</button>
                    <ul>
                        <li>如果您曾使用我们的订餐服务，请输入您上次使用的手机号码。</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    layui.use(['element'], function () {
        var element = layui.element;

    });
    function f() {
        var url = "${pageContext.request.contextPath}/food/getType"
        $.get(url)
    }
    // 接收子页面参数,添加到购物车的请求发给相应的servlet。
    window.addEventListener('message', function(result){

        var data = JSON.parse(result.data);
        // 弹出框-展示子页面传过来的参数
        alert(data.value);

        window.open("/food/addcar?foodid="+data.foodid,"main")

        //刷新导航栏的购物车数量,虽然+1是伪数据，但是炒鸡好用
        $("#carfoodnum").text(${num}+1);
    });
</script>
